<template>
  <div class="wrapper">
    <Main>
      <div class="main-header">
        <div class="wrap-box">
          <Input v-model="searchText" style="width: 200px" placeholder="输入关键字搜索" />
          <Button class="ml-2" @click="request(searchText)" icon="ios-search">搜索</Button>
          <Button class="ml-2" @click="emptyClick" type="dashed">清空</Button>
        </div>
      </div>
      <div class="main-table">
        <div class="tab-nav tab-border">
          <div class="l-box">
            <b>评论列表</b>
          </div>
          <div class="r-box">
            <!-- <Button type="primary">新增导航</Button> -->
          </div>
        </div>
        <div class="tab-wrapper">
          <Table border :columns="columns1" :data="data1" @on-row-dblclick="dbClick"></Table>
        </div>
        <div class="tab-page tab-border">
          <Page :total="page1.total" :pageSize="page1.size" @on-change="page1Change"  @on-page-size-change="page1SizeChange" :page-size-opts="[10, 15, 30, 50]" show-total show-elevator show-sizer />
        </div>
      </div>
    </Main>
  </div>
</template>

<style scoped lang="sass">
  @import "../styles/main.sass"
</style>

<script>
import { Input, Button, Table, Page } from 'view-design'
// @ is an alias to /src
import Main from '@/components/Main.vue'
import utils from '../utils'
import comment from '../service/comment'

export default {
  components: { Main, Input, Button, Table, Page },
  data () {
    return {
      searchText: '',
      page1: {
        total: 0,
        page: 0,
        size: 15,
        load: 0
      },
      columns1: [
        { type: 'index', width: 60, align: 'center' },
        { title: '用户名', key: 'name' },
        { title: 'EMAIL', key: 'email', ellipsis: true },
        {
          title: '文章名称',
          ellipsis: true,
          render: (h, params) => {
            return h('span', params.row.post.title)
          }
        },
        { title: '内容', key: 'content', ellipsis: true }, {
          title: '状态',
          render: (h, params) => {
            const state = params.row.state === 0 ? '未审核' : '已通过'
            return h('span', state)
          }
        }, {
          title: '创建时间',
          key: 'createdAt',
          align: 'center',
          render: (h, params) => {
            const val = params.row.createdAt
            console.log('val', val)
            if (val) {
              return h('span', utils.formatDate(val) || '')
            } else {
              return h('span', '')
            }
          }
        }, {
          title: '操作',
          render: (h, params) => {
            const state = params.row.state
            const arr = [
              h(Button, {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.remove(params.row)
                  }
                }
              }, '删除')
            ]
            if (!state) {
              arr.unshift(h(Button, {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.edit(params.row)
                  }
                }
              }, '通过'))
            }
            return h('div', arr)
          }
        }
      ],
      data1: []
    }
  },
  methods: {
    edit (row) {
      // 是否放行
      comment.edit(row.id).then((resp) => {
        this.$Message.success('操作成功')
        this.request()
      }).catch((resp) => {
        this.$Message.error(resp.message)
      })
    },
    dbClick (index) {
      const data = this.data1[index]
      this.$Modal.info({
        title: data.post.title,
        content: data.content
      })
    },
    emptyClick () {
      this.searchText = ''
      this.page1 = {
        total: 0,
        page: 0,
        size: 15,
        load: 0
      }
      this.request()
    },
    page1Change (index) {
      this.page1.page = index
      this.request()
    },
    page1SizeChange (size) {
      this.page1.size = size
      this.request()
    },
    request (v) {
      if (v) {
        this.page1 = {
          total: 0,
          page: 0,
          size: 15,
          load: 0
        }
      }
      comment.getAll(1, 15, v).then((resp) => {
        const { total, records } = resp.data
        this.data1 = records
        if (!this.page1.load) {
          this.page1.total = total
        }
      }).catch((error) => {
        this.$Message.error(error.message)
      })
    },
    remove (row) {
      // 删除确认
      this.$Modal.confirm({
        title: '确认删除？',
        content: '<p>删除后将不可恢复</p>',
        onOk: () => {
          comment.remove(row.id).then(() => {
            this.$Message.success('操作成功')
            this.request()
          }).catch((resp) => {
            this.$Message.error(resp.message)
          })
        },
        onCancel: () => {
          // this.$Message.info('Clicked cancel');
        }
      })
    }
  },
  created () {
    this.request()
    this.$store.dispatch('active', 'comment')
  }
}
</script>
